<!--
*@Author: zt
*@Description: 会议室管理
*@Date 2024-07-15 09:58
-->
<template>
  <a-layout class="f-h-100 s-bg-white">
    <a-layout-content style="padding: 0 12px; background-color: #fff">
      <a-layout class="f-h-100 s-bg-white">
        <u-search-header style="padding-left: 0; padding-right: 0">
          <u-form
            :model="searchF.model"
            :gutter="16"
            :elements="searchEl"
            class="f-w-auto"
            :isSearch="true"
            @formChange="getSearch(1)"
          >
            <a-col>
              <u-icon-button @click="getSearch(1)">查询</u-icon-button>
            </a-col>
            <a-col flex="1">
              <a-row justify="end">
                <a-space>
                  <u-icon-button itype="add" @click="toEdit(1)">
                    新增
                  </u-icon-button>
                  <u-icon-button itype="edit" @click="toEdit(2)">
                    修改
                  </u-icon-button>
                  <u-icon-button itype="delete" @click="deleteBtn">
                    删除
                  </u-icon-button>
                </a-space>
              </a-row>
            </a-col>
          </u-form>
        </u-search-header>
        <a-layout-content>
          <u-table
            :columns="columns"
            :data="tabData"
            v-model:pagination="pagenation"
            :scroll="{ y: useTableScroll() }"
            @onDblclick="onDblclick"
            @onSelect="({ selectedRows }) => (tabSelData = selectedRows)"
          ></u-table>
        </a-layout-content>
      </a-layout>
    </a-layout-content>
  </a-layout>

  <!-- 编辑弹窗 -->
  <Edit
    v-model:open="showEdit"
    wrap-class-name="full-modal"
    :keyid="keyid"
    :title="dialogTitle"
    @success="(showEdit = false), getSearch(1), keyid == ''"
    @close="(showEdit = false), getSearch(1), keyid == ''"
  />

  <!-- 会议室详情 -->
  <Detials
    v-model:open="showDetial"
    wrap-class-name="full-modal"
    title="会议室详情"
  />
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, h } from 'vue';
import { _IFormEl } from '@/components/common/form/interface';
import { useTableScroll } from '@/hooks/useTable';
import { FormItemProps, Image, Space, TableColumnProps } from 'ant-design-vue';
import { alertC, messageC } from '@/util/common';
import { formatImgUrl } from '@/util/format';
import { cloneDeep } from 'lodash';
import Edit from './Edit.vue';
import Detials from './Detials.vue';
import { statusColors } from '@/views/oa/administration/meet/room/data.ts'
import * as meetRoomApi from '@/service/administration/meet/room/index';

let keyid = ref('');
const tabSelData = ref<any[]>([]);
onMounted(async () => {
  await getSearch(1);
});

let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: total => `共 ${total} 条`,
});
const searchF = reactive({
  model: {},
});
const formItemProps: FormItemProps = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const searchEl: Array<_IFormEl> = [
  {
    label: '使用状态',
    key: 'conferStatus',
    element: 'select',
    col: { span: 4 },
    formItemProps: formItemProps,
    componentProps: {
      allowClear: true,
      options: [
        { label: '使用中', value: '1' },
        { label: '未使用', value: '0' },
      ],
    },
  },
  {
    label: '关键字',
    key: 'keywords',
    element: 'input',
    col: { span: 4 },
    formItemProps: formItemProps,
    componentProps: {
      placeholder: '会议室名称/地点',
    },
  },
];

// 列表
const tabData = ref([]);
let columns: Array<TableColumnProps> = reactive([
  {
    dataIndex: 'index',
    title: '序号',
    width: 60,
    align: 'center',
    customRender: ({ text, record, index }) => {
      return index + 1;
    },
  },
  {
    dataIndex: 'filepath',
    title: '会议室图片',
    width: 100,
    align: 'center',
    customRender: ({ text }) => {
      return h(Image, { src: formatImgUrl(text), style: { width: '40px', height: '40px' } });
    },
  },
  {
    dataIndex: 'name',
    title: '会议室名称',
    width: 300,
  },
  { dataIndex: 'address', title: '地点', width: 150,},
  { dataIndex: 'capacity', title: '容纳人数', width: 150, align: 'right' },
  {
    dataIndex: 'conferenceStatus',
    title: '会议室状态',
    width: 150,
    align: 'center',
    customRender: ({ text }) => {
      return h(Space, () =>  [
        h('div', { class: 'u-status-dot', style: { '--c': statusColors[text] } }),
        h('span', { style: { color: statusColors[text] } }, text),
      ]);
    },
  },
  { dataIndex: 'remark', title: '备注' },
]);

// 列表查询
const getSearch = async current => {
  if (current == 1) {
    pagenation.current = current;
  }
  let tForm = cloneDeep(searchF);
  tForm.current = pagenation.current;
  tForm.size = pagenation.pageSize;
  const res = await meetRoomApi.page(tForm);
  if (res.code == 0) {
    tabData.value = res.data.records;
    pagenation.total = res.data.total;
  }
};
// 编辑
let dialogTitle = ref<string>('');
// 新增或编辑
const toEdit = (type: number) => {
  keyid.value = '';
  if (type == 1) {
    dialogTitle.value = '会议室添加';
  }
  if (type == 2) {
    if (tabSelData.value.length !== 1) {
      alertC('能且只能选择一条数据', 'warning');
      return;
    }
    keyid.value = tabSelData.value[0].keyid;
    dialogTitle.value = '会议室编辑';
  }

  showEdit.value = true;
};

// 行双击
const onDblclick = record => {
  keyid.value = record['keyid'];
  dialogTitle.value = '会议室编辑';
  showEdit.value = true;
};

// 删除
const deleteBtn = async () => {
  if (tabSelData.value.length == 0) {
    alertC('请先选择要删除的数据!', 'warning');
    return;
  }
  let ids = tabSelData.value.map(item => item.keyid);
  alertC('确认删除选中的数据?', 'confirm').then(async () => {
    const res = await meetRoomApi.del({ ids: ids.join(',') });

    if (res.code == 0) {
      getSearch(1);
      messageC(res.msg, 'success');
    } else {
      alertC(res.msg, 'warning');
    }
  });
};

let showEdit = ref<boolean>(false);

// 详情
let showDetial = ref<boolean>(false);
</script>

<style lang="scss" scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}

:deep(.u-status-dot) {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--c);
}
</style>
